<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/jquery-2.1.0.js"></script>
		<style type="text/css">
			.image_block{
				width: 100%;
				height: 400px;
				
			}
			
			.img_upload{
				width: 215px;
				height: 212px;
				margin-left: 20%;
				margin-top: 5%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">扫描识别Logo</h1>
		</header>
		
		<!-- 主体 -->
		<div class="mui-content">
			<div class="image_block">
			   <input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z"/>
			   <div class="img_upload" onclick="chooseImg()">
			       <img src="images/奥迪.png" id="zmz" width="215px" height="212px"/>
			   </div>
			   <!-- 按钮 -->
			   <p style="text-align:center;">
			   <input type="submit" value="立即识别" id="save_btn" class="save_btn"/>
			   </p>
			   <!-- result-->
			   <p id="result_scan" style="text-align:center;">
			   </p>
			</div>
		</div>
		
		<script src="js/car.js"></script>
		<script src="js/convnet-min.js"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			//选择照片
			function chooseImg(){
				$('#img_z').click();
			}
			
			function getzImg(imgFile){
			 
			    var file = imgFile.files[0];
			 
			    var reader = new FileReader();
			    reader.readAsDataURL(file);//将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件
			    reader.onload = function(e){
			        $("#zmz").attr("src",e.target.result);
			    }
			}
			
			//构建网络层
			let layer_defs = [];
			let imageList = [];
			
			const net = new convnetjs.Net();
			//构建层
			//图片的宽度和高度，要与待识别的图一致，本例是100X100
			//输入层
			layer_defs.push({type:'input', out_sx:100, out_sy:100, out_depth:1}); 
			//中间层
			layer_defs.push({type:'conv', sx:5, filters:16, stride:1, pad:2, activation:'relu'});
			layer_defs.push({type:'pool', sx:2, stride:2});
			layer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});
			layer_defs.push({type:'pool', sx:2, stride:2});
			layer_defs.push({type:'conv', sx:5, filters:20, stride:1, pad:2, activation:'relu'});
			layer_defs.push({type:'pool', sx:2, stride:2});
			//输出层
			layer_defs.push({type:'softmax', num_classes:10});
			net.makeLayers(layer_defs);
			//训练层，图像识别的特定的参数
			const trainer = new convnetjs.SGDTrainer(net, {learning_rate:0.01, batch_size:5, l2_decay:0.001});
			//把img图片放到imageList数组中
			for(var i=0; i<carList.length;i++){
			    imageList.push(loadImg(i));
			}
			
			//训练模型，返回一个函数，
			function loadImg(i){
			    return function(){
			        return new Promise(function(resolve,reject){
			            let image = new Image();
			            image.crossOrigin = "Anonymous";//跨域
			            image.src = carList[i].url;
			            //加载成功，进行转换，并训练
			            image.onload = function(){
			            let vol = convnetjs.img_to_vol(image);
			            trainer.train(vol,i);
			                resolve();
			            };
						image.onerror = reject;
					})
			    }
			};
			
			//给按钮绑定事件
			$("#save_btn").click(function(){
				document.getElementById("result_scan").innerText="识别中，请稍后..."
			     const carNameList = ["奥迪","阿尔法-罗密欧","阿斯顿 马丁","AC Schnitzer","ALPINA","安凯客车"];
			     //训练模型--遍历imagelist中的promise，对象都是函数，执行后返回Promise训练后的结果
			     Promise.all(imageList.map(imageContainer=>imageContainer())).then(function(){
			     //拿到页面上的图片进行识别
			     const test = convnetjs.img_to_vol(document.getElementById("zmz"));
			     //把结果放到result数组中，一群0-1的小数放在里面
			     let result = Array.from(net.forward(test).w);
			     //找到数组中值最大的那个，他的索引就是对应的车牌的索引哦
					let max = Math.max.apply(Math,result);
					// console.log("这个汽车logo可能是：" + carNameList[result.indexOf(max)]);
					var resultLogo=carNameList[result.indexOf(max)];
					if(result!=null){
						document.getElementById("result_scan").innerText=resultLogo;
						}
					
			      });
			
			});

		</script>
	</body>

</html>
